<template>
  <div class="home">
    <!-- 二级路由的坑 -->
    <router-view v-if="$route.path=='/home/search'"></router-view>
    <div v-else>
      <!-- 使用搜索栏 -->
    <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" @click="$router.push('/home/search')" />
    <!-- 使用Swiper 组件 -->
    <Swiper :bannerArr="bannerArr"></Swiper>
    <!-- 使用导航组件 -->
    <Grid :channelArr="channelArr"></Grid>
    <!-- 品牌制造商 -->
    <Brand :brandList="brandList"></Brand>
    <!-- 专题精选 -->
    <TopicList :topicList="topicList"></TopicList>
    </div>
    
  </div>
</template>

<script>
// 引入底部Swiper 组件
import Swiper from "@/components/Swiper.vue";
// 引入导航组件
import Grid from "@/components/Grid.vue";
// 引入品牌制造商组件
import Brand from "@/components/Brand.vue";
// 引入专题精选
import TopicList from "@/components/TopicList.vue";
// 导入首页接口请求
import { getIndexData } from "@/utils/http";
export default {
  name: "Home",
  props: [""],
  data() {
    return {
      value: "", //搜索的关键字
      bannerArr: [], //轮播图数据
      channelArr: [], //导航数据
      brandList: [], //品牌制造商
      topicList: [], //专题精选
    };
  },

  components: {
    Swiper,
    Grid,
    Brand,
    TopicList,
  },

  computed: {},

  created() {
    console.log(this.$route.path);
    getIndexData().then((res) => {
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandList = res.data.data.brandList;
      this.topicList = res.data.data.topicList;
      // console.log(res.data.data.topicList);
    });
  },

  mounted() {},

  methods: {},
};
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
</style>